<template>
  <div class="ht-search-form" style="margin-top:16px">
    <p class="ht-form-title">流程追踪</p>
    <el-row style="margin-top:16px">
      <ht-table
        class="ht-table-no-border"
        @onchange="changePage"
        :data="state.data"
        :pagination="{ hideOnSinglePage: true }"
        border
        :page-info="{
          currentPage: state.filter.currentPage,
          pageSize: state.filter.maxResultCount,
          skipCount: state.filter.skipCount,
          totalCount: state.filter.totalCount,
        }"
        pageStyle="text-align:right"
        highlight-current-row
        :columns="flowHistoryColumn"
      >
      </ht-table>
    </el-row>
  </div>
</template>
<script lang="ts">
import { flowHistory } from '@/plugins/columns';
import { Column, PageType } from 'htui-yllkbz/src/packages/type';
import { _axios } from 'vue-kst-auth';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { OperationLogApi, OperationLogDto } from '@/plugins/history';
interface State {
  /** 数据状态 */
  loading: boolean;
  data: OperationLogDto[];
  filter: {
    currentPage: number;
    maxResultCount: number;
    skipCount: number;
    totalCount: number;
  };
}
@Component
export default class Index extends Vue {
  OperationLogApi = new OperationLogApi('/administration-service', _axios);
  @Prop() id!: string;
  /** 数据 */
  state: State = {
    loading: false,
    data: [],
    filter: {
      currentPage: 1,
      maxResultCount: 20,
      skipCount: 0,
      totalCount: 0,
    },
  };
  /** 生命周期 */
  /** 方法 */
  //分页
  changePage(data: PageType) {
    // const data = e.detail[0];
    this.state.filter.currentPage = data.currentPage;
    this.state.filter.maxResultCount = data.maxResultCount;
    this.state.filter.skipCount = data.skipCount;
    this.getDataSource(this.id);
  }
  handelSearch(id: string) {
    this.state.filter.skipCount = 0;
    this.getDataSource(id);
  }
  /** 获取列表 */
  getDataSource(id: string) {
    const { skipCount, maxResultCount } = this.state.filter;
    if (!id) {
      return;
    }
    this.OperationLogApi.operationLog(
      undefined,
      id,
      undefined,
      skipCount,
      maxResultCount
    ).then((res) => {
      this.state.data = res.items || [];
      this.state.filter.totalCount = res.totalCount || 0;
    });
  }
  /** 监听 */
  @Watch('id', { immediate: true })
  getInitData(id: string) {
    this.handelSearch(id);
  }
  /** 计算属性 */
  /** 流程追踪 */
  get flowHistoryColumn(): Column[] {
    return flowHistory(true);
  }
}
</script>
<style lang="scss" scoped></style>
